<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="numArray.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			body {
				text-align: center;
			}
			
			canvas {
				background-image: url(时间背景.jpg);
				background-repeat: no-repeat;
				/*background-size: contain;*/
				background-size: 100% 100%;
			}
		</style>
	</head>

	<body>
		<canvas id="mycanvas"></canvas>
		<script>
			var mycanvas = document.getElementById("mycanvas");
			var pen = mycanvas.getContext("2d");
			mycanvas.width = document.documentElement.clientWidth;
			mycanvas.height = document.documentElement.clientHeight;
			var clockballr=mycanvas.width/46/3;
			var time = new Date();
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();
			var hh = new pd(h);
			var mm = new pd(m);
			var ss = new pd(s);
			draw(hh.hsm1, hh.hsm2);
			draw(mm.hsm1, mm.hsm2);
			draw(ss.hsm1, ss.hsm2);
			setInterval(function() {
				pen.translate(-(2*clockballr*4+2*clockballr*7+2*clockballr*7)*3, 0);
				mycanvas.width = document.documentElement.clientWidth;
			    mycanvas.height = document.documentElement.clientHeight;
			    clockballr=mycanvas.width/46/3;
				pen.clearRect(0, 0, mycanvas.width, mycanvas.height);
				var time = new Date();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				var hh = new pd(h);
				var mm = new pd(m);
				var ss = new pd(s);
				draw(hh.hsm1, hh.hsm2, true);
				draw(mm.hsm1, mm.hsm2, true);
				draw(ss.hsm1, ss.hsm2, false);
				drawball(pen);
			}, 50);
			setInterval(function() {
				var time = new Date();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				var hh = new pd(h);
				var mm = new pd(m);
				var ss = new pd(s);
				//时十位
				if(h % 10 == 0 && m == 0 && s == 0) {
					boomball(hh.hsm1, -(2*clockballr*4+2*clockballr*7+2*clockballr*7+2*clockballr*4+2*clockballr*7+2*clockballr*7+2*clockballr*4+2*clockballr*7+2*clockballr*7));
				}
				//时个位
				if(m == 0 && s == 0) {
					boomball(hh.hsm2, -(2*clockballr*4+2*clockballr*7+2*clockballr*7+2*clockballr*4+2*clockballr*7+2*clockballr*7+2*clockballr*4+2*clockballr*7));
				}
				//分十位爆炸
				if(m % 10 == 0 && s == 0) {
					boomball(mm.hsm1, -(2*clockballr*4+2*clockballr*7+2*clockballr*7+2*clockballr*4+2*clockballr*7+2*clockballr*7));
				}
				//分个位爆炸
				if(s == 0) {
					boomball(mm.hsm2, -(2*clockballr*4+2*clockballr*7+2*clockballr*7+2*clockballr*4+2*clockballr*7));
				}
				//秒十位爆炸
				if(s % 10 == 0) {
					boomball(ss.hsm1, -(2*clockballr*4+2*clockballr*7+2*clockballr*7));
				}
				//秒个位爆炸
				boomball(ss.hsm2, -(2*clockballr*4+2*clockballr*7));
			}, 1000);

			//爆炸小球
			function boomball(ws, zb) {
				for(var a = 0; a < numbers[ws].length; a++) {
					for(b = 0; b < numbers[ws][a].length; b++) {
						if(numbers[ws][a][b] == 1) {
							balls.push(new createball(20*clockballr +zb + b * 2*clockballr, 20*clockballr + a * 2*clockballr, clockballr));
						}
					}
				}
			}

			//判断十位个位数字，也可存入数组
			function pd(hsm) {
				if(hsm >= 10) {
					this.hsm1 = parseInt(hsm / 10);
					this.hsm2 = hsm % 10;
				} else if(hsm < 10) {
					this.hsm1 = 0;
					this.hsm2 = hsm;
				}
			}
			//画表数字,yh判断画不画引号
			function draw(num1, num2, yh) {
				pen.fillStyle = "black";
				for(var a = 0; a < numbers[num1].length; a++) {
					for(b = 0; b < numbers[num1][a].length; b++) {
						if(numbers[num1][a][b] == 1) {
							pen.beginPath();
							pen.arc(20*clockballr + b * 2*clockballr,20*clockballr + 2*clockballr * a, clockballr, 0, 2 * Math.PI);
							pen.fill();
						}
					}
				}
				pen.translate(2*clockballr*7, 0);
				for(var c = 0; c < numbers[num2].length; c++) {
					for(d = 0; d < numbers[num2][c].length; d++) {
						if(numbers[num2][c][d] == 1) {
							pen.beginPath();
							pen.arc(20*clockballr + d * 2*clockballr, 20*clockballr + 2*clockballr * c, clockballr, 0, 2 * Math.PI);
							pen.fill();
						}
					}
				}
				pen.translate(2*clockballr*7, 0);
				if(yh) {
					for(var e = 0; e < numbers[numbers.length - 1].length; e++) {
						for(f = 0; f < numbers[numbers.length - 1][e].length; f++) {
							if(numbers[numbers.length - 1][e][f] == 1) {
								pen.beginPath();
								pen.arc(20*clockballr + f * 2*clockballr, 20*clockballr + 2*clockballr * e, clockballr, 0, 2 * Math.PI);
								pen.fill();
							}
						}
					}
				}
				pen.translate(2*clockballr*4, 0);
			}
			//小球
			function createball(x, y, r) {
				this.x = x;
				this.y = y;
				this.r = r;
				var zf = Math.random() > 0.2 ? -1 : 1;
				this.color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
				this.sx = -(Math.random() * 15 + 5);
				this.sy = (Math.random() * 10 + 5) * zf;
			}
			var balls = [];
			//画球
			function drawball(pen) {
				var inball = 0
				for(var i = 0; i < balls.length; i++) {
					pen.beginPath();
					pen.arc(balls[i].x, balls[i].y, balls[i].r, 0, 2 * Math.PI);
					pen.fillStyle = balls[i].color;
					pen.fill();
					balls[i].y += balls[i].sy;
					balls[i].sy += 9.8;
					balls[i].x += balls[i].sx;
					if(balls[i].y >= mycanvas.height - balls[i].r - mycanvas.height/10) {
						balls[i].y = mycanvas.height - balls[i].r - mycanvas.height/10;
						balls[i].sy = -0.6 * balls[i].sy;
					}
					//解决小球越来越多占内存的问题
					//将可视区域小球依次！放到数组前！因为创建小球坐标平移了所以要减去平移坐标
					if(balls[i].x >(-(2*clockballr*4+2*clockballr*7+2*clockballr*7)*3)-balls[i].r) {
						balls[inball++] = balls[i];
					}
				}
				//循环如果总球数大于可视球数，删除末尾，直到总球数等于可视球
				while(balls.length > inball) {
					balls.pop();
				}
			}
		</script>
	</body>

</html>